import { useEffect, useState } from 'react';
import './index.less'
import dailyNews from '../../../public/image/dailyNews.png'
import { getData } from '@/services/api/api-news';
import React from 'react';
import { Modal, Image, Spin } from 'antd';

const newsPage: React.FC = () => {
    const [data, setData] = useState([]);
    const [isExpanded, setIsExpanded] = useState(false);
    const [imageUrls, setImageUrls] = useState();
    const [isModalOpen, setIsModalOpen] = useState(false);
    const showModal = () => {
        setIsModalOpen(true);
    };

    const handleCancel = () => {
        setIsModalOpen(false);
    };
    const getDataList = async () => {
        const res = await getData()
        // console.log(res.article);
        setData(res.article)
    }
    const showPreview = (url: string) => {
        console.log(url);
        setImageUrls(url)
        showModal()
        setIsExpanded(!isExpanded);
    }
    useEffect(() => {
        getDataList()
    }, [])

    return (
        <Spin spinning={data.length <= 0}>
            <div className="theme-blue" style={{ overflow: 'hidden', height: '100vh', overflowY: 'scroll' }}>
                <Modal open={isModalOpen} onCancel={handleCancel} closable footer={null}>
                    <Image
                        width={450}
                        src={imageUrls}
                    />
                </Modal>
                <head>
                    <title>每日要闻推荐</title>
                    <link rel="stylesheet" href="https://cdn.iappdaily.com/aibxs/css/app.css"></link>
                </head>
                {/* <link rel="stylesheet" type="text/css" href="https://cdn.iappdaily.com/aibxs/css/element-theme-blue.css"></link> */}
                {/* <body>
</body> */}
                <div data-server-rendered="true" id="__nuxt">
                    <div id="__layout">
                        <div className="index_page  pc-transition platform-web">
                            <main>
                                <header className="navbar">
                                    <h1 className="title">
                                        <span aria-current="page" className="nuxt-link-exact-active nuxt-link-active">每日新闻 - Daily News</span>
                                    </h1>
                                    <div icon="person-outline" className="panel">
                                        <div className="login-text">
                                        </div>
                                    </div>
                                </header>
                                <div className="home view">
                                    <div className="nya-container _gg" style={{ marginTop: '-12px' }}>
                                        <span className="nya-container-subtitle"></span>
                                        <div >
                                            <img src={dailyNews} />
                                        </div>
                                    </div>
                                    <div className="nya-container s11 pt" style={{ display: 'none' }}>
                                        <div className="nya-title">
                                            <i className="eva eva-gift-outline"></i>
                                            <span>会员</span>
                                        </div>
                                        <span className="nya-container-subtitle"></span>
                                        <a href="/account#pay" rel="noopener noreferrer">
                                            <button type="button" className="el-button el-button--primary">
                                                <span>
                                                    立即解锁所有会员功能
                                                </span>
                                            </button>
                                        </a>
                                        <div className="note">
                                            成为会员解锁全部功能，独享 VIP 专属通道，无限畅聊创作。
                                        </div>
                                    </div>

                                    <div className="nya-loading" style={{ margin: '2rem auto', display: 'none' }}>
                                        <div className="nya-loading__div"></div>
                                    </div>
                                    {data.map((value, index) => (
                                        <div className="nya-container pt" key={index}>
                                            <div className="nya-title" style={{ backgroundColor: '#249FFD' }}>
                                                <i className="eva eva--outline"></i>
                                                <span>{value.source}</span>
                                            </div>
                                            <span className="nya-container-subtitle"></span>
                                            <span style={{ color: '#2F3E4C' }}>
                                                {value.icon ? <img src={value.icon} /> : <div className="tools-font-icon" style={{ backgroundColor: `#${value.ico_color}` }}><i className={`eva eva-${value.ico_name}`}></i></div>}
                                                <div className="tools-card-text">
                                                    <div className="tools-card-name" style={{ fontSize: 'large' }}>
                                                        {value.title}
                                                    </div>
                                                    <div className="tools-card-desc" style={{ whiteSpace: 'normal', fontSize: 'medium' }}>
                                                        {value.content}
                                                    </div>
                                                </div>
                                            </span>
                                            <div style={{ textAlign: 'right' }}>
                                                <a onClick={() => showPreview(value.image)} id="image" style={{ color: "#249FFD" }}>查看版面位置</a>
                                                <a href={value.url} target="_blank" style={{ marginLeft: 15, color: "#249FFD" }}>原文链接</a>
                                            </div>
                                        </div>
                                    ))}
                                </div>

                                <div className="tools-footer">
                                    <div className="footer-version">
                                        <div>备案号:渝ICP备2021004499号-4<u> </u>  <div style={{ marginTop: '10px' }}
                                            rel="nofollow" target="_blank">@2023 重庆市委宣传部</div> </div>
                                    </div>
                                </div>
                            </main>


                            {/* <div className="theme-btn">
                            <div className="line" style={{ height: '36px' }}></div>
                            <div className="type-icon darkmode"><i className="eva eva-moon-outline"></i></div>
                        </div>
 */}

                        </div>
                    </div>
                </div>
            </div>
        </Spin>
    )
};
export default newsPage;
